<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .container{
            width: 40%;
            margin: 20px auto;
        }
        .common{
            width:230px;
            height: 30px;
        }
        span{
            display:inline-block;
            width: 150px;

            text-align: right;
        }
        div{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<form class="container">
    <!-- ********* Begin ********* -->
    <div>
        <span>用户名：</span><input type="text" class="common">
    </div>
    <div>
        <span>昵称：</span><input type="text" class="common">
    </div>
    <div>
        <span>性别：</span>
        <label for="male"><input type="radio" id="male" name="sex"/>男</label>
        <label for="female"><input type="radio" id="female" name="sex"/>女</label>
        <label for="other"><input type="radio" id="other" name="sex" disabled="disabled"/>保密</label>
        </div>
    <div>
            <span>教育程度：</span>
            <select class="common">
                <option>高中</option>
                <option>中专</option>
                <option>大专</option>
                <option selected>本科</option>
                <option>硕士</option>
                <option>博士</option>
                <option>其他</option>
            </select>
    </div>
    <div>
        <span>婚姻状况：</span>
        <label for="single"><input checked type="radio" id="single" name="state"/>未婚</label>
        <label for="married"><input type="radio" id="married" name="state"/>已婚</label>
        <label for="secret"><input type="radio" id="secret" name="state"/>保密</label>
    </div>
    <div>
        <span>兴趣爱好：</span>
        <label for="football"><input type="checkbox" name="hobby" id="football" />踢足球</label>
        <label for="basketball"><input type="checkbox" name="hobby" id="basketball" />打篮球</label>
        <label for="film"><input type="checkbox" name="hobby" id="film" checked/>看电影</label>
    </div>
    <div>
        <span>描述自己的特点：</span>
        <textarea class="common" maxlength="20"></textarea>
    </div>
    <div>
        <span></span>
<!--        <input type="button" class="common" value="提交"/>-->
        <button class="common" value="提交">提交</button>
    </div>
        <!-- ********* End ********* -->
</form>
</body>
</html>